<template>
  <div>
    <h1>Course</h1>
    <p>{{ msg }}</p>
    <p>{{ count }}</p>
    <button @click="add">+++</button>
    <ul>
      <li>
        <router-link
          :to="{ path: '/details', query: { id: 1001, title: '前端' } }"
          >前端</router-link
        >
      </li>
      <li>
        <router-link
          :to="{ name: 'Details', params: { id: 1002, title: 'Java' } }"
          >Java</router-link
        >
      </li>
      <li>
        <router-link to="/details/1003">Go</router-link>
      </li>
      <li>
        <router-link to="/details">Unity</router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "CourseView",
  data() {
    return {
      msg: "hello world",
      count: 0,
    };
  },
  methods: {
    add() {
      this.count++;
    },
    goTo() {
      //
      this.$router.push({
        path: "/details",
        query: {
          id: 1001,
          title: "前端",
        },
      });
    },
  },
};
</script>

<style>
</style>
